<template>
    <a-form ref="form" :form.sync="formObj" selfUpdate>
        <a-row v-for="(row, r) in form.rows" :key="r">
            <a-col :span="col.span" :offset="col.offset" v-for="(col, c) in row.cols" :key="r + '' + c">
                <a-form-item :label.sync="col.field.label" :label-col="{ span: col.field.labelSpan }" :wrapper-col="{ span: col.field.wrapperSpan }" v-show="col.field.show">
                    <form-item :ref="col.field.id" :field="col.field" :value="list" v-if="col.field.key === 'list'"></form-item>
                    <form-item :ref="col.field.id" :field.sync="col.field" v-decorator="castRule(col.field)" @change="handleChange" v-else></form-item>
                </a-form-item>
            </a-col>
        </a-row>
        <a-row v-if="!modal">
            <a-col>
                <a-button block type="primary" @click="submit">保存提交</a-button>
            </a-col>
        </a-row>
    </a-form>
</template>

<script>
import FormItem from './FormItem';
import FormTable from './FormTable';
import { get } from '@/api/form';
export default {
    name: 'FormView',
    components: { FormItem, FormTable },
    provide() {
        return {
            form: this,
            castRule: this.castRule
        };
    },
    props: {
        id: {
            type: String
        },
        data: {
            type: Object
        },
        modal: {
            type: Boolean
        }
    },
    data() {
        return {
            // 表单结构
            form: {},
            // 表单数据
            formObj: this.$form.createForm(this, { name: 'form' }),
            list: [
                { USERNAME: 'admin', PASSWORD: '123456', NAME: '测试', BZ: '10086', SKIN: 'normal', EMAIL: '123@qq.com' },
                { USERNAME: '111', PASSWORD: '222', NAME: '333', BZ: '10086', SKIN: 'normal', EMAIL: '123@qq.com' }
            ]
        };
    },
    created() {
        let id = this.id || this.$route.query.id;
        console.info('form view', id, this.data);
        if (id) {
            this.handleLoadData(id);
        } else {
            this.$message.error('没有要填写的表单');
        }
    },
    methods: {
        handleChange() {
            console.info(arguments);
        },
        // 加载表单数据
        async handleLoadData(id) {
            let res = await get(id);
            if (!+res.state) {
                this.form = {
                    ...res.data,
                    rows: JSON.parse(res.data.dataFormLayout || '[]')
                };
            }
        },
        // 表单提交
        async submit() {
            const _this = this;
            return new Promise((resolve, reject) => {
                _this.formObj.validateFieldsAndScroll(err => {
                    if (!err) {
                        let data = _this.formObj.getFieldsValue();
                        resolve(data);
                    } else {
                        reject(err);
                    }
                });
            });
        },
        // 组装表单组件校验规则和初始值
        castRule(field) {
            let res = [
                field.field,
                {
                    initialValue: field.value,
                    rules: [{ required: field.required, message: field.message }]
                }
            ];
            if (field.key === 'input') {
                res[1].rules.push({ pattern: new RegExp(field.reg), message: field.message });
            }
            if (field.key === 'number') {
                res[1].rules.push({ min: field.min, message: field.message });
                res[1].rules.push({ max: field.max, message: field.message });
            }
            return res;
        }
    }
};
</script>

<style lang="scss" scoped></style>
